<template>
  <div>
    <div class="video-warp">
      <div class="border-warp" v-if="faces.length">
        <div class="border" v-for="item in faces" :style="getBorder(item)"></div>
      </div>
      <mvideo @data="getImgData" :width="width" :height="height"></mvideo>
    </div>
  </div>
</template>

<script>
  import ref from 'ref'
  import FaceBase from '../../../sdk/arcface/FaceBase'
  import FaceFT from '../../../sdk/arcface/FaceFT'
  import FaceFR from '../../../sdk/arcface/FaceFR'
  import mvideo from '@/common/mvideo/mvideo'

  export default {
    name: 'faceFeature',
    props: {
      width: {
        type: Number
      },
      height: {
        type: Number
      }
    },
    data() {
      return {
        faces: []
      }
    },
    methods: {
      getImgData(data) {
        let _this = this
        _this.faces = []
        let _data = Buffer.from(data.replace(/.+,/, ''), 'base64')
        FaceBase.loadImage(_data, (err, img) => {
          if (err) throw err
          _this.detect(img, data)
        })
      },
      /**
       * 检测人脸
       * @param img
       * @param data
       */
      detect(img, data) {
        FaceFT.detect(this.$store.state.hFTEngine, img, (err, asvl, faces) => {
          if (err) throw err
          if (faces.nFace === 0) {
            this.$store.commit('updateStatusMsg', '没有检测到人脸')
          } else {
            this.faces = faces.info
            this.feature(asvl, faces, data)
          }
        })
      },
      /**
       * 获取脸部特
       * @param asvl
       * @param faces
       */
      feature(asvl, faces, data) {
        // 已检测到的脸部信息
        faces.info.forEach((val, index) => {
          let face = val
          let faceRes = new FaceFR.AFR_FSDK_FACERES()
          faceRes.rcFace.left = face.left
          faceRes.rcFace.top = face.top
          faceRes.rcFace.right = face.right
          faceRes.rcFace.bottom = face.bottom
          faceRes.lOrient = face.orient

          let faceFeature = new FaceFR.AFR_FSDK_FACEMODEL()
          faceFeature.lFeatureSize = 0
          faceFeature.pbFeature = ref.NULL

          let ret = FaceFR.AFR_FSDK_ExtractFRFeature(this.$store.state.hFREngine, asvl.ref(), faceRes.ref(), faceFeature.ref())

          if (ret !== 0) {
            this.$store.commit('updateStatusMsg', `获取脸部特征失败:${ret}`)
          } else {
            this.$store.commit('updateStatusMsg', '')
            let faceFeatureCopy = new FaceFR.AFR_FSDK_FACEMODEL()
            faceFeatureCopy.lFeatureSize = faceFeature.lFeatureSize
            faceFeatureCopy.pbFeature = FaceBase.malloc(faceFeatureCopy.lFeatureSize)
            FaceBase.memcpy(faceFeatureCopy.pbFeature.address(), faceFeature.pbFeature.address(), faceFeatureCopy.lFeatureSize)
            this.$emit('feature', {faceFeatureCopy, data})
          }
        })
      },
      getBorder(info) {
        return {
          top: `${info.top}px`,
          left: `${info.left}px`,
          width: `${info.right - info.left}px`,
          height: `${info.bottom - info.top}px`
        }
      }
    },
    components: {
      mvideo
    }
  }
</script>

<style scoped lang="stylus">
  .video-warp
    width 100%
    height 100%
    position relative
    .border-warp
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      .border
        position absolute
        display flex
        border 1px solid #f00
        z-index 999
</style>
